<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../back-common.jsp"%>
<%@ include file="/WEB-INF/pages/common/taglib.jsp"%>
<%@ include file="/WEB-INF/pages/common/back-dialog.jsp"%>
<script type='text/javascript' src="<ls:templateResource item='/resources/common/js/jquery.validate.js'/>" ></script>
<link rel="stylesheet" type="text/css" media="screen" href="${contextPath}/resources/common/css/errorform.css" ></script>
<script type='text/javascript' src="<ls:templateResource item='/resources/plugins/ztree/jquery.ztree.core-3.5.min.js'/>"></script>
<script type='text/javascript' src="<ls:templateResource item='/resources/plugins/ztree/jquery.ztree.excheck-3.5.js'/>"></script>
<link type="text/css" rel="stylesheet"  href="<ls:templateResource item='/resources/plugins/ztree/zTreeStyle.css'/>" >
<script src="<ls:templateResource item='/resources/plugins/My97DatePicker/WdatePicker.js'/>" type="text/javascript"></script>
<link href="<ls:templateResource item='/resources/plugins/select2-4.0/select2.css'/>" rel="stylesheet"/>
<script src="<ls:templateResource item='/resources/plugins/select2-4.0/select2.full.min.js'/>" type="text/javascript"></script>
<script src="<ls:templateResource item='/resources/plugins/select2-4.0/i18n/zh-CN.js'/>" type="text/javascript"></script>
<script src="<ls:templateResource item='/resources/plugins/select2-4.0/makeSelect2.js'/>" type="text/javascript"></script>

<style type="text/css">
<!--
.group-item {
    display: block;
    float: left;
    font-size: 14px;
    width: 200px;
}

.w-150px {
    width: 150px;
}

.text-right {
    text-align: right;
}
-->
</style>
        <form:form  action="${contextPath}/admin/adminUser/save" method="post" id="form1">
            <input id="id" name="id" value="${adminUser.id}" type="hidden">
        <table class="${tableclass}" style="width: 100%">
	    <thead>
	    	<tr><th><a href="<ls:url address='/admin/index'/>" target="_parent">首页</a> &raquo;权限管理  &raquo; <a href="${contextPath}/admin/adminUser/query">成员管理</a> &raquo; 创建成员</th></tr>
	    </thead>
	    </table>

            <div align="center">
         <table border="0" align="center" class="${tableclass}" id="col1">
		<tr>
		        <td style="min-width: 180px; width: 180px;">
		          	<div align="right">登录名称: <font color="ff0000">*</font></div>
		       	</td>
		        <td>
		           	<input  class="${inputclass}"  type="text" name="name" id="name" value=""  maxlength="50"/>
		        </td>
		</tr>
		<tr>
		        <td>
		          	<div align="right">姓名: <font color="ff0000">*</font></div>
		       	</td>
		        <td>
		           	<input  class="${inputclass}"  type="text" name="realName" id="realName"  autocomplete="off"   maxlength="50"/>
		        </td>
		</tr>
		<tr>
		        <td>
		          	<div align="right">密码: <font color="ff0000">*</font></div>
		       	</td>
		        <td>
		           	<input  class="${inputclass}"  type="password" name="password" id="password"   autocomplete="off"   maxlength="50"/>
		        </td>
		</tr>
		<tr>
		        <td>
		          	<div align="right">确认密码: <font color="ff0000">*</font></div>
		       	</td>
		        <td>
		           	<input  class="${inputclass}"  type="password" name="password2" id="password2"   autocomplete="off"   maxlength="50"/>
		        </td>
		</tr>
		<tr>
		        <td>
		          	<div align="right">状态 <font color="ff0000">*</font></div>
		       	</td>
		        <td>
								<select id="enabled" name="enabled"  class="${selectclass}">
								  	<ls:optionGroup type="select" required="true" cache="true"  beanName="ENABLED" selectedValue=""/>
					            </select>
		        </td>
		</tr>
		
		  	<tr>
		     	<td>
		          	<div align="right">选择角色: <font color="ff0000">*</font></div>
		       	</td>
		      <td class="pv-10px"  id="roles">
		      <c:forEach items="${requestScope.roleList}" var = "role">
				          <div class="group-item">
				          		<input type="checkbox"  value="${role.id}"  id='${role.id}'  name="roleId">
				         		 <span id="index-index" class="priv">${role.name}</span>
				        </div>
				  </c:forEach>
		        </td>
		    </tr>
		    <tr>
		        <td>
		          	<div align="right">性别: </div>
		       	</td>
		        <td>
		           	<select id="sex" name="sex"  class="${selectclass}">
		           		<ls:optionGroup type="select" required="true" cache="true" beanName="STAFF_SEX" selectedValue="${item.sex}"/>
		           	</select>
		        </td>
		</tr>
		 <tr>
		        <td>
		          	<div align="right">职位: </div>
		       	</td>
		        <td>
		           	<select id="position" name="position"  class="${selectclass}">
		           		<ls:optionGroup type="select" required="true" cache="true"
	                      beanName="STAFF_POSITION" selectedValue="${item.position}"/>
		           	</select>
		        </td>
		</tr>
		<tr>
		        <td>
		          	<div align="right">上级: </div>
		       	</td>
		        <td>
				  <select name="leader" id="leader" style="width: 200px">
				  		<c:if test="${not empty item.leader}">
					   	  <option value="${item.leader}">${item.leader}</option>
					   	</c:if>
				  </select>
		        </td>
		</tr>
	    <tr>
		        <td>
		          	<div align="right">部门: <font color="ff0000">*</font></div>
		       	</td>
		        <td>
								<div >  
						            <input class="${inputclass}"    id="deptName"  name="deptName"  type="text" readonly value="" onclick="showMenu(); return false;" />  
						            <input   id="deptId"  name="deptId"  type="hidden"  />  
						        </div>  
						        <div id="menuContent" class="menuContent" style="display: none; position: absolute; height:400px; overflow:auto">
                        			<ul id="deptMenu" class="ztree" style="margin-top: 0;  background: #fff; border: 2px solid #0E90D2;">
                        		</ul>
                    </div>
		        </td>
		</tr>
		 <tr>
			<td>
					 <div align="right">首次登陆是否需要修改密码</div>
			</td>
			 <td>
				 <select id="changePass" name="changePass"  class="${selectclass}">
					 <ls:optionGroup type="select" required="false" cache="true"  beanName="YES_NO" selectedValue="" />
				 </select>
				 </td>
		</tr>
		<tr>
		        <td>
		          	<div align="right">到期时间: </div>
		       	</td>
		        <td>
		           	<input onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly"  name="activeTime" id="activeTime"  class="${inputclass}"  type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})"  />
		        </td>
		</tr>
	    <tr>
		        <td>
		          	<div align="right">手机号码: </div>
		       	</td>
		        <td>
		           	<input  class="${inputclass}"  type="text" name="mobile" id="mobile" value=""   maxlength="15"/>
		        </td>
		</tr>

	    <tr>
		        <td>
		          	<div align="right">身份证号: </div>
		       	</td>
		        <td>
		           	<input  class="${inputclass}"  type="text" name="idCardNum" id="idCardNum" value=""   maxlength="18"/>
		        </td>
		</tr>

	    <tr>
		        <td>
		          	<div align="right">住址: </div>
		       	</td>
		        <td>
		           	<input  class="${inputclass}"  type="text" name="addr" id="addr" value=""   maxlength="150"/>
		        </td>
		</tr>
		
		 <tr>
		        <td>
		          	<div align="right">入职时间: </div>
		       	</td>
		        <td>
		         <input readonly="readonly"  name="hireDate" id="hireDate"  class="${inputclass}"  type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})" value='<fmt:formatDate value="${bean.startTime}" pattern="yyyy-MM-dd"/>' />
		        </td>
		</tr>
		
		<tr>
		        <td>
		          	<div align="right">注释: </div>
		       	</td>
		        <td>
		           	<input  class="${inputclass}"  type="text" name="note" id="note" value=""  style="width: 300px"/>
		        </td>
		</tr>
                <tr>
                    <td colspan="2">
                        <div align="center">
                            <input class="${btnclass}"  type="submit" value="提交" />
                            <input class="${btnclass}"  type="reset" value="重置" />
                            <input class="${btnclass}"  type="button" value="返回"
                                onclick="window.location='<ls:url address="/admin/adminUser/query"/>'" />
                        </div>
                    </td>
                </tr>
            </table>
           </div>
        </form:form>
  <script language="javascript">
		    $.validator.setDefaults({
		    });
		    
	jQuery.validator.addMethod("stringCheck", function(value, element) {
     return value.isAlpha();}, '<fmt:message key="user.reg.username"/>'); 

   jQuery.validator.addMethod("checkName1", function(value, element) {
     return checkAdminName(value);}, '用户名已经存在'); 
   
   jQuery.validator.addMethod("checkPassword", function(value, element) {
	     var regx=/(?=.*[a-zA-Z])(?=.*[\d])[\w\W]{6,16}/;
	     return regx.test(value);
   }, '密码由6-16为字母和数字组成'); 

    $(document).ready(function() {
    jQuery("#form1").validate({
            rules: {
            name: {
                required: true,
                minlength: 3,
                stringCheck: true,
                checkName1: true
            },
            realName: "required",
            deptName:"required",
            password: {
            	required: true,
            	checkPassword:true
            }, 
		    password2:{
		    	equalTo: "#password"
		    }
        },
        messages: {
            name: {
                required: "请输入成员名称",
                minlength: "成员名字必须大于3个字符"
            },
            realName:{
             	 required: "请输入真实名字"
            },
            deptName:{
             required: "请输入部门"
            },
            password: {
                required: "请输入密码"
            },
			 password2:{
		    	 equalTo: "密码必须要一致"
		    }
        },
        submitHandler:function(form){
            var role=$("input[name='roleId']:checked");
            if(role.length==0){
            	layer.msg("请选择角色");
               return false;
            }
	    	 form.submit();
        }
    });
       // 构造菜单
		createTree();
       
		makeSelect2(contextPath + "/admin/adminUser/userList","#leader","上级","value","key");
});


	// 检查成员是否已经存在
	function checkAdminName() {
		var result = true;
	var nameValue = jQuery("#name").val();
	if(nameValue!=null && nameValue!=''){
	if(nameValue.length >= 3 && nameValue.isAlpha() ){
       //call ajax action
	       $.ajax({
				url: contextPath + "/admin/adminUser/isAdminUserExist", 
				data: {"userName":nameValue},
				type:'post', 
				async : false, //默认为true 异步   
				error: function(jqXHR, textStatus, errorThrown) {
			 		 //console.log(textStatus, errorThrown);
				},
				success:function(retData){
				 		if(retData){
							result = false;
						  }
				}
				});
	      }
	    }
    return result;
	}
	
		/*** 检查是否由数字字母和下划线组成 ***/
	String.prototype.isAlpha = function() {
		return (this.replace(/\w/g, "").length == 0);
	}
	
	function showMenu(id) {
            var nameObj = $("#deptName");
            var nameOffset =nameObj.offset(); 
            $("#menuContent").css({ left: nameOffset.left + "px", top: nameOffset.top + nameObj.outerHeight() + "px" }).slideDown("fast");  
            $("body").bind("mousedown", blurMenu);
        }
        
        function hideMenu() {
            $("#menuContent").fadeOut("fast");  
            $("body").unbind("mousedown", blurMenu);  
        }
        
		function blurMenu(event) {
			var stillFocus = event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0;
            if ( !stillFocus ) {  
                hideMenu();  
            } 
        }
        
        function updateDept(deptId,deptName){
        	$("#deptName").val(' ' + deptName);
        	$("#deptId").val(' ' + deptId);
        }
		
		function createTree() {
            var setting = {};
			setting.view ={ selectedMulti:false }; 
			setting.edit = { enable :false };
			setting.callback = { onClick: onClick };
			setting.data = { simpleData:{ enable: true, pIdKey: "parentId"} };
			
			var request = {};
			request.url = '${contextPath}/admin/department/queryDeptInfo';
			request.type = 'post';
			request.dataType = 'json';
			request.ContentType = 'application/json; charset=utf-8';
			request.error = function (msg) {  layer.alert("树状菜单创建失败");};
			request.success = function (data) {
                    $.fn.zTree.init($("#deptMenu"), setting, data );
					$.fn.zTree.getZTreeObj("deptMenu").expandAll(true);
					initDept();
            };
			
           	$.ajax(request);
        }
        
      function initDept(){
			var tree = $.fn.zTree.getZTreeObj("deptMenu");
			$("input[id^='deptName']").each(function(){
				
				var dept = $(this).attr("name");
				if( dept == "" ) return;
				
				var node = tree.getNodeByParam("id", dept);
				if( node != null ) 
					$(this).attr("value", "  "+node.name);
				
			});
		}
        
   		function onClick( event, treeId, treeNode ){
			var zTree = $.fn.zTree.getZTreeObj("deptMenu");
            var dept = zTree.getSelectedNodes()[0];
            updateDept(dept.id, dept.name );
			hideMenu();
		}
		
	
</script>

